<template>
  <div class="formManage-container">
    <div class="make-form card">
      <h2 class="setting-header">
        <strong>创建问卷</strong>
      </h2>
      <div class="form-type-box" v-loading="formTypelListLoading">
        <div class="form-type" v-permission="['form:manage:design:add']" v-for="(item, index) in formTypelList" :key="index" @click="goModel(item)">
          <div class="title">
            <i class="iconfont" :style="{ color: item.iconColor }" v-html="item.typeIcon"></i>
            {{ item.title }}
          </div>
          <div class="description" :title="item.description">{{ item.description }}</div>
        </div>
      </div>
    </div>
    <formList />
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import formList from '@/views/form/manage/components/FormList'
import { getFormTypeList } from '@/api/formDesign'
import { useStore } from 'vuex'
import { encrypt } from '@ruifox-cms/utils'

const store = useStore()
const router = useRouter()
const goModel = val => {
  store.commit('formDesignInfo/SET_curId', val.id)
  let toUrl = router.resolve({
    path: '/form/manage/design',
    query: {
      id: encrypt(val.id),
      qsTypeName: encrypt(val.title)
    }
  })
  window.open(toUrl.href, '_blank')
}
const formTypelList = ref()
const formTypelListLoading = ref(false)
const handleGetFormTypelList = async () => {
  formTypelListLoading.value = true
  let res = await getFormTypeList()
  formTypelList.value = res.data
  formTypelListLoading.value = false
}
handleGetFormTypelList()
</script>
<style scoped lang="scss">
.formManage-container {
  width: 100%;
  .card {
    margin-top: 10px;
    border-radius: 6px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
    padding: 20px 20px 30px;
    box-sizing: border-box;
    background-color: #ffffff;
    h2 {
      strong {
        font-size: 18px;
        font-weight: bold;
        margin-right: 20px;
      }
    }
    .form-type-box {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-top: 20px;
      .form-type {
        width: 200px;
        height: 90px;
        box-sizing: border-box;
        margin-right: 20px;
        padding: 10px 20px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        border-radius: 2px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: flex-start;
        border: 1px transparent solid;
        cursor: pointer;
        &:hover {
          border: 1px rgb(170, 170, 170, 0.4) solid;
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
        }
        .description {
          width: 100%;
          font-size: 12px;
          color: #9f9f9f;
          margin-top: 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
  .content {
    .search-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
      .left-btns {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .state {
          margin-right: 10px;
        }
      }
      .search {
        i.iconfont {
          color: $mainColor;
          cursor: pointer;
        }
      }
    }
    .qs-list-box {
      margin-top: 30px;
      .qs-list-item {
        width: 100%;
        height: 100px;
        box-sizing: border-box;
        padding: 0 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        transition:
          background-color 0.2s,
          box-shadow 0.2s,
          border-color 0.2s;
        margin-bottom: 10px;
        &:hover {
          background-color: var(--el-color-primary-light-9);
          border-color: var(--el-color-primary-light-5);
          box-shadow: 0 0 10px var(--el-color-primary-light-9);
        }
        .top {
          height: 64px;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px #e4e4e4 solid;
          .top-left {
            .collect-btn {
              margin-right: 8px;
              cursor: pointer;
              i {
                color: #d7d7d7;
              }
            }
            .is-collect {
              i {
                color: #ff9700;
              }
            }
            .type {
              margin-right: 8px;
              i {
                font-size: 20px;
              }
            }
            .title {
              font-size: 16px;
              line-height: 18px;
              color: #333;
              @include textEllipsis(18px, 1);
            }
          }
          .top-right {
            width: 500px;
            flex-shrink: 0;
            .nomal-label,
            .answer-num {
              margin-right: 20px;
              color: #797979;
              font-size: 14px;
            }
            .answer-num {
              .answer-label {
                color: #333333;
              }
            }
          }
        }
        .bottom {
          height: calc(100% - 64px);
          display: flex;
          justify-content: space-between;
          align-items: center;
          .bottom-left {
            span {
              font-size: 14px;
              color: #797979;
              margin-right: 8px;
            }
          }
          .bottom-right {
            font-size: 14px;
            .btn {
              color: #333;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              margin-left: 20px;
              cursor: pointer;
              i {
                color: #797979;
                margin-right: 3px;
              }
              .more {
                font-size: 30px;
              }
            }
          }
        }
        .flex-row {
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }
      }
    }
  }
}
</style>
